<%--
  Created by IntelliJ IDEA.
  User: ykj
  Date: 16/2/11
  Time: 下午11:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>理财产品-产品详细</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/financial.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/bootstrap/js/jquery.bootstrap.min.js"></script>

    <script src="${pageContext.request.contextPath}/js/buyProduct.js"></script>
</head>
<body>
    <jsp:include page="topbar.jsp" flush="true"/>
    <div class="container workbench">
        <div class="workbench-product" style="overflow: hidden;">
            <!--概述信息-->
            <div class="product-detail-content">
                <div class="panel panel-default" style="height: 296px;">
                    <div class="panel-heading">
                        <div class="panel-title">
                            <strong>${product.name}</strong>
                        </div>
                        <div class="panel-subtitle">
                            <a class="panel-subtitle" href="#">《产品合同》</a>
                        </div>
                    </div>
                    <div class="panel-body">
                        <div class="primaryInfo">
                            <div class="column">
                                <div style="margin-top: 20px">
                                    <div class="caption">
                                        年化收益率
                                    </div>
                                    <div style="margin-top: 20px">
                                        <span class="value" style="color: #ff5656">${product.rateReturn}</span>
                                        <span class="unit">%</span>
                                    </div>
                                </div>
                            </div>
                            <div class="column-split">
                                <div class="column-split-line"></div>
                            </div>
                            <div class="column">
                                <div style="margin-top: 20px">
                                    <div class="caption">投资期限</div>
                                    <div style="margin-top: 20px">
                                        <span class="value">${product.needTime}</span>
                                        <span class="unit">天</span>
                                    </div>
                                </div>
                            </div>
                            <div class="column-split">
                                <div class="column-split-line"></div>
                            </div>
                            <div class="column">
                                <div style="margin-top: 20px">
                                    <div class="caption">保障方式</div>
                                    <div style="margin-top: 25px">
                                    </div>
                                    <div style="margin-top: 10px">
                                        <span class="bg-badge">${product.guaranteeName}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="secondaryInfo">
                            <!--产品规模,回款方式,起息时间-->
                            <div style="height: 30px;">
                                <div class="column" style="width: 200px;">
                                    <span class="caption">产品规模：</span>
                                    <span class="value"><fmt:formatNumber value="${product.totalMoney/10000}" pattern="#0.0"/>万元</span>
                                </div>
                                <div class="column" style="width: 280px;">
                                    <span class="caption">回款方式：</span>
                                    <span class="value" style="color: #ff6666">到期一次性还本付息</span>
                                </div>
                                <div class="column" style="width: 200px;">
                                    <span class="caption">起息时间：</span>
                                    <span class="value"><fmt:formatDate value="${product.createTime}" pattern="yyyy-MM-dd"/></span>
                                </div>
                            </div>
                            <div style="height: 30px;margin-top: 20px;">
                                <div class="column" style="width: 120px;">
                                    <span class="caption">当前成交进度：</span>
                                </div>
                                <div class="column" style="width: 360px;">
                                    <div class="progress" style="width: 300px;height: 10px;margin-top: 6px;">
                                        <div class="progress-bar" style="width: ${product.alreadyMoney/product.totalMoney*100}%;"></div>
                                        <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 0%;"></div>
                                    </div>
                                </div>
                                <div class="column" style="width: 200px;">
                                    <span class="caption">剩余可投：</span>
                                    <span class="value"><fmt:formatNumber value="${(product.totalMoney-product.alreadyMoney)/10000}" pattern="#0.0"/>万元</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--投资金额-->
            <div class="product-buy-sidebar">
                <div class="panel panel-default" style="height: 296px;">
                    <div class="panel-heading">
                        <div class="panel-title">
                            <strong>我要投资</strong>
                            <span style="color: #a5a5a5">(限购年龄为<span style="color: #ff6600">18</span>至<span style="color: #ff6600">65</span>周岁)</span>
                        </div>
                    </div>
                    <div class="panel-body">
                        <form id="buyForm" method="post" action="buy">
                            <div class="collection">
                                <label style="color: #a5a5a5">投资金额：</label>
                                <div class="inline-box">
                                    <div class="notice">
                                        <span style="color: #ff6600">￥100.0</span>元起投，单笔限额<span style="color: #ff6600">￥200,000.0</span>元
                                    </div>
                                    <input type="number" name="invest" id="invest" min="100" max="200000">
                                    <input type="hidden" name="productId" value="${product.id}"/>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                            <div style="margin-top: 45px">
                                <input id="buyFormSubmit" type="button" class="btn btn-danger buy-btn" value="立即投资" />
                            </div>
                            <div>
                                <div class="agreement">
                                    <label class="checkbox">
                                        <input type="checkbox"> 我已阅读并同意签署
                                    </label>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!--产品资料-->
        <div class="document" style="margin-top: 20px;margin-bottom: 20px;">
            <div class="document-header">
                <span class="title document-header-icon-title document-header-icon-info">产品信息</span>
            </div>
            <div style="border-bottom: 1px solid #efefef;"></div>
            <div class="document-body">
                <div class="list-box">
                    <div class="list-box-header" style="height: 175px;width: 180px;">
                        <div style="position: relative; top: 36.5px; left: 0.5px;">
                            <img src="${pageContext.request.contextPath}/img/icon-info-72.png">
                            <div class="title">基本信息</div>
                        </div>
                    </div>
                    <div class="list-box-content">
                        <div class="list-box-content">
                            <div style="font-size: 14px;"><h5><strong>聚财</strong></h5></div>
                            <div style="margin-top: 10px;">
                                <div style="font-size: 14px;">华软聚财是华软金融联合国内领军金融资产交易所、AA+评级融资性担保公司或知名金融机构共同推出的固定收益类理财产品。<br></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="list-box">
                    <div class="list-box-header" style="height: 182px;width: 180px;">
                        <div style="position: relative; top: 39px; left: 0.5px;">
                            <img src="${pageContext.request.contextPath}/img/icon-basket-72.png">
                            <div class="title">购买说明</div>
                        </div>
                    </div>
                    <div class="list-box-content" id="purchaseDesc">
                        <div class="list-box-content">
                            <span style="font-size: 14px;">本产品为广州金融资产交易中心推送并管理的固定收益类理财产品，并由知名金融机构提供见证服务。 本产品起购金额为5000元，起息日2016/3/1，到期日2016/8/29。购买前请认真阅读《产品说明书》、《认购风险揭示书》等相关文件，当您“确认付款”则表示您已确 认并同意《认购协议》等相关文件中的内容。投资有风险，详情请参考《产品说明书》。</span>
                        </div>
                    </div>

                </div>
                <div class="list-box">
                    <div class="list-box-header" style="height: 197px;width: 180px;">
                        <div style="position: relative; top: 46.5px; left: 0.5px;">
                            <img src="${pageContext.request.contextPath}/img/icon-partner-72.png">
                            <div class="title">合作机构</div>
                        </div>
                    </div>
                    <div class="list-box-content">
                        <div class="list-box-content">
                            <div>
                                <h5><strong>广州金融资产交易中心</strong></h5>
                                <span style="font-size: 14px;"><p>广州金融资产交易中心于2013年12月20日获得广东省人民政府批准开业，是国有企业控股、市场化运作的金融资产交易场所，并最新于2015年09月28日获得广东省相关部门给予的开展理财产品的批复。</p></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
